<template>
  <el-dialog
    :title="tagTypeObj.title"
    :visible.sync="tagTypeObj.show"
    center
    width="560px"
    :before-close="handleClose">
    <div>
      <el-form ref="myForm" :inline="true" :model="tagType" :rules="rules" label-width="140px">
        <el-form-item prop="labelTypeNumber" label="标签类型编号">
          <el-input
            placeholder="请输入标签类型编号"
            :disabled="isDisabled"
            v-model="tagType.labelTypeNumber"
          ></el-input>
        </el-form-item>
        <el-form-item prop="labelTypeName" label="标签类型名称">
          <el-input
            placeholder="请输入标签类型名称"
            :disabled="isDisabled"
            v-model="tagType.labelTypeName"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="!isDisabled" type="primary" @click="handleSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { validateStrLenNo, validateStrLen } from '@/utils/validate'
// 表单校验
const rules = {
  labelTypeNumber: [
    { required: true, message: '请输入标签类型编号', trigger: 'blur' },
    { validator: validateStrLenNo, trigger: 'blur' }
  ],
  labelTypeName: [
    { required: true, message: '请输入标签类型名称', trigger: 'blur' },
    { validator: validateStrLen, trigger: 'blur' }
  ]
}
export default {
  props: {
    tagTypeObj: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isDisabled () {
      return this.tagTypeObj.title === '查看设备标签类型'
    }
  },
  data: () => ({
    tagType: {
      labelTypeNumber: '',
      labelTypeName: ''
    },
    rules
  }),
  methods: {
    handleSure () {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          console.log('保存')
          this.$emit('ok', this.tagType)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$emit('close')
    }
  },
  mounted () {
    this.tagType = { ...this.tagType, ...this.tagTypeObj.row }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  width: 260px;
}
</style>
